<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Scroll</title>
	<!-- Including Senna -->
	<script src="../../build/globals/senna-debug.js"></script>
	<link rel="stylesheet" href="../../build/senna.css">
</head>
<body class="senna-transition-fade">
	<h1 id="section1">Section 1</h1>
	<div id="surface1">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolores illum eaque reprehenderit odio quisquam saepe asperiores veniam sit autem, animi sunt delectus nihil, dolore maxime. Similique nihil explicabo et!<br/>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolores illum eaque reprehenderit odio quisquam saepe asperiores veniam sit autem, animi sunt delectus nihil, dolore maxime. Similique nihil explicabo et!<br/>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolores illum eaque reprehenderit odio quisquam saepe asperiores veniam sit autem, animi sunt delectus nihil, dolore maxime. Similique nihil explicabo et!<br/>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolores illum eaque reprehenderit odio quisquam saepe asperiores veniam sit autem, animi sunt delectus nihil, dolore maxime. Similique nihil explicabo et!<br/>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolores illum eaque reprehenderit odio quisquam saepe asperiores veniam sit autem, animi sunt delectus nihil, dolore maxime. Similique nihil explicabo et!<br/>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolores illum eaque reprehenderit odio quisquam saepe asperiores veniam sit autem, animi sunt delectus nihil, dolore maxime. Similique nihil explicabo et!<br/>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolores illum eaque reprehenderit odio quisquam saepe asperiores veniam sit autem, animi sunt delectus nihil, dolore maxime. Similique nihil explicabo et!<br/>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolores illum eaque reprehenderit odio quisquam saepe asperiores veniam sit autem, animi sunt delectus nihil, dolore maxime. Similique nihil explicabo et!<br/>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolores illum eaque reprehenderit odio quisquam saepe asperiores veniam sit autem, animi sunt delectus nihil, dolore maxime. Similique nihil explicabo et!<br/>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolores illum eaque reprehenderit odio quisquam saepe asperiores veniam sit autem, animi sunt delectus nihil, dolore maxime. Similique nihil explicabo et!<br/>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolores illum eaque reprehenderit odio quisquam saepe asperiores veniam sit autem, animi sunt delectus nihil, dolore maxime. Similique nihil explicabo et!<br/>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolores illum eaque reprehenderit odio quisquam saepe asperiores veniam sit autem, animi sunt delectus nihil, dolore maxime. Similique nihil explicabo et!<br/>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolores illum eaque reprehenderit odio quisquam saepe asperiores veniam sit autem, animi sunt delectus nihil, dolore maxime. Similique nihil explicabo et!<br/>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolores illum eaque reprehenderit odio quisquam saepe asperiores veniam sit autem, animi sunt delectus nihil, dolore maxime. Similique nihil explicabo et!<br/>
	</div>
	
	<br/>
	<a href="/examples/scroll">Index</a>
	<a href="/examples/scroll/page1">Page1</a>
	<a href="/examples/scroll/page2">Page2</a>
	<a href="#section1"># Section 1</a>
	<a href="#section2"># Section 2</a>

	<h1 id="section2">Section 2</h1>
	<div id="surface2">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolores illum eaque reprehenderit odio quisquam saepe asperiores veniam sit autem, animi sunt delectus nihil, dolore maxime. Similique nihil explicabo et!<br/>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolores illum eaque reprehenderit odio quisquam saepe asperiores veniam sit autem, animi sunt delectus nihil, dolore maxime. Similique nihil explicabo et!<br/>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolores illum eaque reprehenderit odio quisquam saepe asperiores veniam sit autem, animi sunt delectus nihil, dolore maxime. Similique nihil explicabo et!<br/>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolores illum eaque reprehenderit odio quisquam saepe asperiores veniam sit autem, animi sunt delectus nihil, dolore maxime. Similique nihil explicabo et!<br/>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolores illum eaque reprehenderit odio quisquam saepe asperiores veniam sit autem, animi sunt delectus nihil, dolore maxime. Similique nihil explicabo et!<br/>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolores illum eaque reprehenderit odio quisquam saepe asperiores veniam sit autem, animi sunt delectus nihil, dolore maxime. Similique nihil explicabo et!<br/>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolores illum eaque reprehenderit odio quisquam saepe asperiores veniam sit autem, animi sunt delectus nihil, dolore maxime. Similique nihil explicabo et!<br/>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolores illum eaque reprehenderit odio quisquam saepe asperiores veniam sit autem, animi sunt delectus nihil, dolore maxime. Similique nihil explicabo et!<br/>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolores illum eaque reprehenderit odio quisquam saepe asperiores veniam sit autem, animi sunt delectus nihil, dolore maxime. Similique nihil explicabo et!<br/>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolores illum eaque reprehenderit odio quisquam saepe asperiores veniam sit autem, animi sunt delectus nihil, dolore maxime. Similique nihil explicabo et!<br/>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolores illum eaque reprehenderit odio quisquam saepe asperiores veniam sit autem, animi sunt delectus nihil, dolore maxime. Similique nihil explicabo et!<br/>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolores illum eaque reprehenderit odio quisquam saepe asperiores veniam sit autem, animi sunt delectus nihil, dolore maxime. Similique nihil explicabo et!<br/>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolores illum eaque reprehenderit odio quisquam saepe asperiores veniam sit autem, animi sunt delectus nihil, dolore maxime. Similique nihil explicabo et!<br/>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolores illum eaque reprehenderit odio quisquam saepe asperiores veniam sit autem, animi sunt delectus nihil, dolore maxime. Similique nihil explicabo et!<br/>
	</div>

	<script>
		var app = new senna.App();
		app.addSurfaces(['surface1', 'surface2']);
		app.addRoutes(new senna.Route('/examples/scroll/', senna.Screen));
		app.addRoutes(new senna.Route('/examples/scroll/page1', function() {
			var screen = new senna.Screen();
			screen.getSurfaceContent = function(surfaceId) {
				if (surfaceId === 'surface1') {
					return 'Foo';
				}
			}
			return screen;
		}));
		app.addRoutes(new senna.Route('/examples/scroll/page2', senna.Screen));
		app.dispatch();
	</script>
</body>
</html>